<!--
 * @Author: your name
 * @Date: 2020-05-29 15:37:34
 * @LastEditTime: 2020-06-12 18:49:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \IM_Web\im_web\src\views\reset\index.vue
--> 
<template>
    <div class="login flex align_center justify_center">
        <div class="login_page_content flex justify_between">
            <div class="content_logo"></div>
            <div>
                <div class="title">企内聊</div>
                <Form ref="formInline" :model="formInline" :rules="ruleInline">
                    <FormItem prop="acount">
                        <div class="form_item flex align_center">
                            <div class="form_icon acount_icon"></div>
                            <iInput type="text" v-model="formInline.acount" placeholder="请输入账号"></iInput>
                        </div>
                    </FormItem>
                    <FormItem prop="password">
                        <div class="form_item flex align_center">
                            <div class="form_icon pwd_icon"></div>
                            <iInput
                                type="password"
                                v-model="formInline.password"
                                placeholder="请输入新密码"
                            ></iInput>
                        </div>
                    </FormItem>
                    <FormItem prop="confirmPassword">
                        <div class="form_item flex align_center">
                            <div class="form_icon pwd_icon"></div>
                            <iInput
                                type="password"
                                v-model="formInline.confirmPassword"
                                placeholder="请再次输入新密码"
                            ></iInput>
                        </div>
                    </FormItem>
                    <FormItem prop="answer" style="margin-bottom:15px;" v-show="isAnswerBox">
                        <div class="form_item flex align_center">
                            <div class="form_icon pwd_icon"></div>
                            <iInput
                                type="text"
                                v-model="formInline.answer"
                                placeholder="请输入答案"
                                style="width:140px;"
                                v-show="isAnswerBox"
                            ></iInput>
                            <div @click="refreshCode()">
                                <s-identify :identifyCode="identifyCode" :contentWidth="100"></s-identify>
                            </div>
                        </div>
                    </FormItem>
                    <FormItem prop="identifyCode" style="margin-bottom:15px;" v-show="!isAnswerBox">
                        <div class="form_item flex align_center justify_between">
                            <div class="flex align_center">
                                <div class="form_icon pwd_icon"></div>
                                <iInput
                                    type="text"
                                    v-model="formInline.identifyCode"
                                    placeholder="请输入验证码"
                                    style="width:140px;"
                                ></iInput>
                            </div>
                            <Button
                                :disabled="countdownNumber!==60"
                                @click="getIdentifyCode()"
                            >{{countdownNumber===60?'重新发送':`${countdownNumber}秒后...`}}</Button>
                        </div>
                    </FormItem>
                    <!-- <FormItem prop="captcha">
                        <iInput type="text" v-model="formInline.captcha" placeholder="Code"></iInput>
                    </FormItem>-->
                    <!-- <FormItem style="margin-bottom:17px;">
                        <div class="flex justify_between align_center color_333">
                            <div>短信登录</div>
                            <div>忘记密码</div>
                        </div>
                    </FormItem>-->
                    <FormItem>
                        <Button
                            type="primary"
                            @click="handleSubmit('formInline')"
                            class="sub_btn"
                            :loading="loading"
                        >确认</Button>
                    </FormItem>
                </Form>
                <!-- <div class="dowload_code_box flex justify_between">
                    <div class="flex flex_direction align_center">
                        <div class=" dowload_code flex align_center justify_center">
                            <div class="android_dowload_code"></div>
                        </div>
                        <div>安卓APP下载</div>
                    </div>
                    <div class="flex flex_direction align_center">
                        <div class="ios_dowload_code dowload_code flex align_center justify_center">
                            <div class="android_dowload_code"></div>
                        </div>
                        <div>苹果APP下载</div>
                    </div>
                </div>-->
                <!-- <Input v-model="acount" placeholder="Enter something..." style="width: 300px" /> -->
                <!-- <Input v-model="pwd" placeholder="Enter something..." style="width: 300px" /> -->
            </div>
        </div>
    </div>
</template>

<script>
import SIdentify from "../../components/sidentify/index.vue";
let timer = null;
export default {
    props: {},
    data() {
        const validateMobile = (rule, value, callback) => {
            // console.log(rule, value);
            if (!this.http.myregMobile.test(value) || value.length < 11) {
                callback(new Error("请输入正确的手机号"));
            } else {
                callback();
            }
        };
        const validate2Password = (rule, value, callback) => {
            if (value === this.formInline.confirmPassword) {
                callback();
            } else {
                callback(new Error("两次密码不一致"));
            }
        };
        const validateAnswer = (rule, value, callback) => {
            if (this.formInline.acount === "") {
                callback(new Error("请输入手机号"));
                return;
            }
            // console.log(5555);
            if (Number(value) === this.answer) {
                // console.log(1);
                if (this.ruleInline.answer[0].required) {
                    this.getIdentifyCode();
                }
                this.ruleInline.answer[0].required = false;
                this.ruleInline.identifyCode[0].required = true;
                this.isAnswerBox = false;
                callback();
            } else {
                this.formInline.answer = "";
                this.refreshCode();
                callback(new Error("答案不正确"));
            }
        };
        return {
            formInline: {
                acount: "",
                password: "",
                confirmPassword: "",
                identifyCode: "",
                answer: ""
            },
            ruleInline: {
                acount: [
                    {
                        required: true,
                        message: "请输入账号",
                        trigger: "blur"
                    },
                    {
                        validator: validateMobile,
                        trigger: "blur"
                    }
                ],
                password: [
                    {
                        required: true,
                        message: "请输入新密码",
                        trigger: "blur"
                    },
                    {
                        type: "string",
                        min: 6,
                        message: "密码不能小于6位",
                        trigger: "blur"
                    }
                ],
                confirmPassword: [
                    {
                        required: true,
                        message: "请再次输入新密码",
                        trigger: "blur"
                    },
                    {
                        type: "string",
                        min: 6,
                        message: "密码不能小于6位",
                        trigger: "blur"
                    },
                    {
                        validator: validate2Password,
                        trigger: "blur"
                    }
                ],
                identifyCode: [
                    {
                        required: false,
                        message: "请输入验证码",
                        trigger: "blur"
                    }
                ],
                answer: [
                    {
                        required: true,
                        message: "请输入答案",
                        trigger: "blur"
                    },
                    {
                        validator: validateAnswer,
                        trigger: "blur"
                    }
                ]
            },
            loading: false,
            isAnswerBox: true,
            identifyCodes: "1234567890",
            symbol: ["+", "-", "*"],
            identifyCode: "",
            answer: "",
            countdownNumber: 60
        };
    },
    computed: {},
    created() {
        this.refreshCode();
    },
    mounted() {},
    watch: {},
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.resetPassword();
                    // this.$Message.success("Success!");
                } else {
                    // this.$Message.error("Fail!");
                }
            });
        },
        resetPassword() {
            let params = {
                mobile: this.formInline.acount,
                code: this.formInline.identifyCode,
                password: this.formInline.password
            };
            this.http.resetpwd(params).then(res => {
                // console.log(res);
                this.loading = false;
                this.$Message.destroy();
                if (res.data.errno === "000") {
                    this.$Message.success(res.data.errmsg);
                    this.$router.replace("/login");
                } else {
                    this.$Message.error(res.data.errmsg);
                }
            });
        },
        countdown() {
            timer = setInterval(() => {
                if (this.countdownNumber === 0) {
                    this.clearCountdown();
                    return;
                }
                --this.countdownNumber;
            }, 1000);
        },
        clearCountdown() {
            clearInterval(timer);
            this.countdownNumber = 60;
        },
        getIdentifyCode() {
            let params = {
                mobile: this.formInline.acount,
                type: "resetpwd"
            };
            this.http.getVerify(params).then(res => {
                console.log(res);
                this.$Message.destroy();
                res.data.errno === "000"
                    ? this.$Message.success(res.data.errmsg)
                    : this.$Message.error(res.data.errmsg);
                this.countdown();
            });
        },
        //验证码
        randomNum(min, max, index) {
            let n = "";
            switch (index) {
                case 0:
                    n = Math.floor(Math.random() * (max - min) + min);
                    n === 0 ? Math.floor(Math.random() * (max - min) + min) : n;
                    break;
                case 1:
                    n = this.symbol[Math.floor(Math.random() * 3)];
                    break;
                case 2:
                    n = Math.floor(Math.random() * (max - min) + min);
                    break;
                case 3:
                    n = "=?";
                    break;
            }
            return n;
        },

        refreshCode() {
            // this.clearCountdown();
            this.identifyCode = "";
            this.makeCode(this.identifyCodes, 4);
        },
        makeCode(o, l) {
            let rand = "";
            this.answer = "";
            let answer = [];
            for (let i = 0; i < l; i++) {
                rand = this.randomNum(1, this.identifyCodes.length, i);
                // console.log(rand);
                answer.push(rand);
                this.identifyCode += rand;
                // this.identifyCodes[
                //     this.randomNum(0, this.identifyCodes.length,i)
                // ];
            }
            // console.log(answer);
            this.answer =
                answer[1] === "+"
                    ? answer[0] + answer[2]
                    : answer[1] === "-"
                    ? answer[0] - answer[2]
                    : answer[0] * answer[2];
            // console.log(this.identifyCode);
        }
    },
    components: {
        SIdentify
    }
};
</script>

<style>
.form_item .ivu-input {
    border: 0;
}
.form_item .ivu-input:focus {
    box-shadow: 0px 0px 0px rgb(255, 255, 255) !important;
}
.form_item .ivu-input {
    background: #fff !important;
}
</style>
<style scoped lang="less">
@import url("./index.less");
</style>
